<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :show-close="true"
      width="700"
      :close-on-click-modal="false"
    >
      <template #header="{ titleId }">
        <div
          class="my-header"
          style="border-bottom: 1px solid #ccc; padding-bottom: 10px"
        >
          <span :id="titleId" style="margin-right: 20px">项目详情</span>
          <el-button type="primary" size="small" @click="innerVisible = true"
            >查验详情</el-button
          >
        </div>
      </template>
      <el-row>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple" style="text-align: right">
            项目名称：
          </div>
        </el-col>
        <el-col :span="16"
          ><div class="grid-content ep-bg-purple" style="text-align: left">
            {{ detailMsg.name }}
          </div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple" style="text-align: right">
            查验类型：
          </div>
        </el-col>
        <el-col :span="16"
          ><div class="grid-content ep-bg-purple" style="text-align: left">
            {{ detailMsg.type == 1 ? "常规检查" : "街道巡检" }}
          </div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple" style="text-align: right">
            所属小区：
          </div>
        </el-col>
        <el-col :span="16"
          ><div class="grid-content ep-bg-purple" style="text-align: left">
            {{ detailMsg.communityname }}
          </div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple" style="text-align: right">
            查验模板：
          </div>
        </el-col>
        <el-col :span="16"
          ><div class="grid-content ep-bg-purple" style="text-align: left">
            {{ detailMsg.templatename }}
          </div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple" style="text-align: right">
            查验人员：
          </div>
        </el-col>
        <el-col :span="16"
          ><div class="grid-content ep-bg-purple" style="text-align: left">
            {{ detailMsg.testname }}
          </div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple" style="text-align: right">
            查验期限：
          </div>
        </el-col>
        <el-col :span="16"
          ><div class="grid-content ep-bg-purple" style="text-align: left">
            {{ $dayjs(detailMsg.starttime).format("YYYY-MM-DD") }} -
            {{ $dayjs(detailMsg.endtime).format("YYYY-MM-DD") }}
          </div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple" style="text-align: right">
            项目备注：
          </div>
        </el-col>
        <el-col :span="16"
          ><div class="grid-content ep-bg-purple" style="text-align: left">
            {{ detailMsg.remarks }}
          </div></el-col
        >
      </el-row>
      <el-dialog
        v-model="innerVisible"
        :close-on-click-modal="false"
        width="800"
        :title="detailMsg.name"
        append-to-body
      >
        <template #header="{ titleId }">
          <div
            class="my-header"
            style="border-bottom: 1px solid #ccc; padding-bottom: 10px"
          >
            <span :id="titleId" style="margin-right: 20px">{{
              detailMsg.name
            }}</span>
            <el-button type="primary" size="small" @click="innerVisible = false"
              >项目详情</el-button
            >
            <el-button type="primary" size="small" @click="innerVisible = true"
              >导出报告</el-button
            >
          </div>
        </template>
      </el-dialog>
    </el-dialog>
  </div>
</template>
<script setup >
import { ref } from "vue";

const dialogVisible = ref(false);
const detailMsg = ref({});
const open = (row) => {
  console.log(row, "row");
  detailMsg.value = row;
  dialogVisible.value = true;
};
const searchHandle = () => {
  console.log("searchHandle");
};
const innerVisible = ref(false);
defineExpose({
  open,
});
</script>
<style lang='less' scoped>
.el-row {
  height: 50px;
}
</style>